import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {InputNumber, Input, Slider, Tabs} from 'antd';
import SlideInput from '../../common/SlideInput/index';

const TabPane = Tabs.TabPane;

class MUeditorOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {
                html: ''
            }
        }
    };


    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, dataset} = this.state.data;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);
        var {html} = dataset;

        return (
            <div className="optsPanel">
                <Tabs defaultActiveKey="1">
                    <TabPane tab="组件内容" key="1">
                        <div className="ueditorWrap">
                            <div id="J-UEditor" name="content" type="text/plain"></div>
                        </div>
                    </TabPane>
                    <TabPane tab="样式配置" key="2">
                        <div className="optsPanel__item">
                            <label className="optsPanel__item__hd">上外边距</label>
                            <div className="optsPanel__item__bd">
                                <SlideInput
                                    step={1} min={0} max={100} defaultValue={0} value={marginTop}
                                    onChange={(val) => {
                                        this.$dataChange('marginTop', val + 'px', 'style');
                                    }}
                                />
                            </div>
                        </div>
                        <div className="optsPanel__item">
                            <label className="optsPanel__item__hd">下外边距</label>
                            <div className="optsPanel__item__bd">
                                <SlideInput
                                    step={1} min={0} max={100} defaultValue={0} value={marginBottom}
                                    onChange={(val) => {
                                        this.$dataChange('marginBottom', val + 'px', 'style');
                                    }}
                                />
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        );
    }

    componentDidMount() {
        this._initEditor()
    }

    _initEditor() {
        const _self = this;
        var {dataset} = this.state.data;
        var {html} = dataset;
        const ueEditor = window.UE.getEditor('J-UEditor', {
            toolbars: [
                [
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'insertimage'
                ]
            ],
            initialFrameHeight: 200,
            elementPathEnabled: false, //元素路径关闭
            wordCount: false, //关闭数字统计
            maximumWords: 100, //最大字条限制
        });

        ueEditor.ready((ueditor) => {
            if (!ueditor) {
                window.UE.delEditor('J-UEditor');
                _self._initEditor();
            } else {
                ueEditor.setContent(html || '<span>请输入富文本内容</span>');
            }
        });
        ueEditor.addListener('contentChange', function () {
            _self.$dataChange('html', this.getContent().replace(/\n/, ''), 'dataset');
        });
    }
}

export default MUeditorOpts;
